import React from "react";
import "./index.css"
import {nanoid} from "nanoid"
export default function Header({setTodoList,todoList}) {
   //发布事件函数
   const publishHandle = (e) => {
    //判断是否点击的是回车
    if (e.keyCode !== 13) return;

    //获取输入的内容,判断是否输入为空
    const publishValue = e.target.value.trim();
    if (!publishValue) return alert("请输入正确的内容");

    //创建新的todo对象
    const newTodo = { id: nanoid(), todo: publishValue, done: false }

    //调用父组件传递过来的改变todoList的方法 把newTodo添加进入
    setTodoList([newTodo, ...todoList])

    //清空输入框
    e.target.value = ""
  }
  return (
    <div>
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={publishHandle} />
      </div>
    </div>
  );
}
